<template>
	<view>
		<cu-custom></cu-custom>

		<loginModal :showLoginModal.sync="showLoginModal" @changes="loginModalConfirm"></loginModal>

		<scroll-view scroll-y class="scrollPage">
			<view class="margin-top-xl padding-lr-xl padding-bottom-sm">

				<view>
					<view class="margin-top-lg">
						<button :class="'cu-btn line-orange round icon ' + (isLoad ? 'loading' : '')" @tap="refresh">
							<text class="cuIcon-loading"></text>
						</button>
					</view>
				</view>
			</view>

			<view class="margin-lg margin-top-xl margin-bottom-xl padding-sm bg-white radius shadow shadow-lg">
				<view :class="'load-progress ' + (loadProgress != 0 ? 'show' : 'hide')"
					:style="'top:' + CustomBar + 'px;'">
					<view class="load-progress-spinner text-orange"></view>
				</view>
				<view class="flex justify-between">
					<view class="padding-sm">
						<view class="tex-bold text-xl text-left">当前绩点 :</view>
						<view class="text-background text-left">请继续努力哦！</view>
					</view>
					<view style="font-size: 50rpx" class="text-bold text-df text-orange padding-sm">
						<view>{{ gpa }}</view>
					</view>
				</view>
			</view>

			<view class="margin-lg margin-top-xl margin-bottom-xl padding-sm bg-white radius shadow shadow-lg">
				<view class="cu-list grid col-4 no-border">
					<view @tap="toNavigate" data-url="guanyu" class="cu-item">
						<view class="cuIcon-calendar text-mauve"></view>
						<text>关于</text>
					</view>
					<view @tap="toNavigate" data-url="rizhi" class="cu-item">
						<view class="cuIcon-creative text-purple"></view>
						<text>更新日志</text>
					</view>
					<view @tap="showToast" data-name="feedback" class="cu-item">
						<view class="cuIcon-servicefill text-red"></view>
						<text>反馈</text>
					</view>
					<view @tap="showToast" data-name="benifit" class="cu-item">
						<view class="cuIcon-appreciatefill text-orange"></view>
						<text>捐助</text>
					</view>
					<view @tap="showToast" data-name="mingxie" class="cu-item">
						<view class="cuIcon-friendfavor text-red"></view>
						<text>鸣谢</text>
					</view>
				</view>
			</view>

			<view class="margin-lg margin-top-xl padding-sm bg-white radius shadow shadow-lg">
				<view class="flex-sub text-center">
					<view @tap="login" class="text-df text-grey padding">{{ statusLog }}</view>
				</view>
			</view>

			<view class="flex-sub text-center">
				<view class="text-df text-gray padding">Jysir_ 的个人作品</view>
			</view>

			<view class="flex-sub text-center">
				<view class="text-df text-gray padding">a1.0r1.0</view>
			</view>

			<view class="cu-tabbar-height"></view>

			<view :class="'cu-modal ' + (modalName == 'feedback' ? 'show' : '')">
				<view class="cu-dialog bg-white" style="">
					<view class="cu-bar bg-white justify-end">
						<view class="content">反馈</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-purple"></text>
						</view>
					</view>
					<view class="bg-white">
						<view class="action text-lg padding-sm text-left">
							<text class="cuIcon-mail text-cyan margin-lr-lg"></text>
							Mail : Laujoyce@vip.qq.com
						</view>
						<view class="action text-lg padding-sm text-left">
							<text class="cuIcon-servicefill text-orange margin-lr-lg"></text>
							QQ : 1043251484
						</view>
						<view class="action text-lg padding-sm text-left">
							<text class="cuIcon-friend text-purple margin-lr-lg"></text>
							QQ Group : 496145592
						</view>
						<view class="action text-lg padding-sm text-left margin-bottom-sm">
							<text class="cuIcon-voice text-pink margin-lr-lg"></text>
							网易云音乐 : Jysir_
						</view>
					</view>
				</view>
			</view>

			<view :class="'cu-modal ' + (modalName == 'benifit' ? 'show' : '')">
				<view class="cu-dialog bg-white" style="">
					<view class="cu-bar bg-white justify-end">
						<view class="content">捐助</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-purple"></text>
						</view>
					</view>
					<view class="bg-white">
						<image mode="aspectFit" style="width: 400rpx" src="/static/images/benifit.jpg"></image>
					</view>
				</view>
			</view>

			<view :class="'cu-modal ' + (modalName == 'mingxie' ? 'show' : '')">
				<view class="cu-dialog bg-white" style="">
					<view class="cu-bar bg-white justify-end">
						<view class="content">
							<view>
								<text class="cuIcon-likefill text-bold text-red margin-lr-lg"></text>
								特别感谢
							</view>
						</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-purple"></text>
						</view>
					</view>
					<view class="bg-white">
						<view class="action text-lg padding-lr-lg padding-bottom-lg text-center">
							<view class="margin-tb-sm">Jysir_</view>
							<view class="margin-tb-sm">Brondon</view>
							<view class="margin-tb-sm">Wazplesx</view>
							<view class="margin-tb-sm">凡哥</view>
							<view class="margin-tb-sm">Andy</view>
						</view>
					</view>
				</view>
			</view>



			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	// pages/wode/index.js
	const app = getApp();
	import loginModal from '@/pages/login-modal/index'
	export default {
		components: {
			loginModal,
		},
		data() {
			return {
				CustomBar: app.globalData.CustomBar,
				statusLog: '',
				statusIs: '',
				gpa: '',
				isLoad: false,
				showModal: false,
				loadProgress: 0,
				modalName: '',
				showLoginModal: false,
			};
		},
		options: {
			addGlobalClass: true
		},
		created() {
			let that = this;
			uni.getStorage({
				key: 'userID',
				success: function() {
					that.setData({
						statusLog: '点击编辑登录信息',
						statusIs: 1
					});
				},
				fail: function() {
					that.setData({
						statusLog: '还未登录过',
						statusIs: 0
					});
				}
			});
			uni.getStorage({
				key: 'gpa',
				success: function(res) {
					that.setData({
						gpa: res.data
					});
				},

				fail() {
					that.setData({
						gpa: '--'
					});
				}
			});
		},
		beforeMount() {
			if (uni.getUserProfile) {
				this.setData({
					canIUseGetUserProfile: true
				});
			}

			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					that.setData({
						hasUserInfo: true,
						userInfo: res.data
					});
				}
			});
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			getNewInfo() {
				let that = this;
				uni.getStorage({
					key: 'userID',
					success: function() {
						that.setData({
							statusLog: '点击编辑登录信息',
							statusIs: 1
						});
					},
					fail: function() {
						that.setData({
							statusLog: '还未登录过',
							statusIs: 0
						});
					}
				});
			},
			refresh() {
				let that = this;
				uni.getStorage({
					key: 'userID',
					fail() {
						uni.redirectTo({
							url: '/pages/login/index'
						});
					},
					success() {
						that.doSuccess();
					}
				});
			},

			doSuccess() {
				let that = this;
				this.loadProgressFun();
				this.setData({
					isLoad: true
				});
				uni.showLoading({
					title: '正在获取绩点'
				});
				uni.request({
					url: 'http://211.82.48.36/main/academicInfo',
					success(res) {
						console.log(res)
						console.log(res.data.indexOf("登录"))
						if (res.data.indexOf("登录") != -1) {
							that.setData({
								isLoad: false,
								showLoginModal: true
							})
						}
						uni.showToast({
							title: '获取成功'
						});
						uni.setStorageSync('gpa', res.data[0].gpa);
						that.setData({
							gpa: res.data[0].gpa,
							isLoad: false,
						});
					},
					fail() {
						that.setData({
							isLoad: false,
							showLoginModal: true
						})
					},
					complete() {
						uni.hideLoading()
					}
				});
			},

			loadProgressFun() {
				this.setData({
					loadProgress: this.loadProgress + 3
				});

				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.loadProgressFun();
					}, 100);
				} else {
					this.setData({
						loadProgress: 0
					});
				}
			},


			login() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},

			loginModalConfirm(e) {
				this.refresh()
			},

			showToast(e) {
				let target = e.currentTarget.dataset.name;
				this.setData({
					modalName: target
				})

			},

			toNavigate(e) {
				uni.navigateTo({
					url: '/pages/' + e.currentTarget.dataset.url + '/index'
				});
			},

			hideModal(e) {
				this.setData({
					modalName: ''
				});
			},

		}
	};
</script>
<style>
	@import './index.css';
</style>
